<template>
    <el-container style="height: 80vh" ref="bodyform">
        <div class="el_main_content">
            <div class="main_content_header">实时聊天</div>
            <div class="main_content_center">
                <el-scrollbar class="faultExpertConsultation_scrollbar" ref="scrollbarRef">
                    <div v-for="(item, index) in messages" :key="index" class="chat_message"
                        :class="{ 'message-left': item.user === currentUser, 'message-right': item.user !== currentUser }">
                        <strong>{{ item.user }}:</strong> {{ item.content }}
                    </div>
                </el-scrollbar>
            </div>
            <div class="main_content_footer">
                <div class="input_box">
                    <textarea class="chat-input no-border" v-model="question" @keydown.enter="sendMessage" />
                </div>
                <div class="btn_box">
                    <el-button type="primary" class="btn" @click="sendMessage">
                        发送
                    </el-button>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";

const question = ref(""); // 输入框值
const messages = ref([]); // 存储聊天消息
const socket = ref(null);
const currentUser = ref(""); // 当前用户身份

// 设置用户身份
const setUser = (user) => {
    localStorage.setItem('currentUser', user);
    currentUser.value = user;
};

// 选择用户 A 或 B
if (!localStorage.getItem('currentUser')) {
    // 默认设置为用户 A
    setUser('A'); // 可以根据需要更改为 'B'
} else {
    currentUser.value = localStorage.getItem('currentUser');
}

// 连接到 WebSocket 服务器
onMounted(() => {
    socket.value = new WebSocket('ws://localhost:8080');

    socket.value.addEventListener('open', () => {
        console.log('WebSocket连接已打开');
    });

    socket.value.addEventListener('message', (event) => {
        const receivedMessage = JSON.parse(event.data);
        messages.value.push(receivedMessage);
        // 存储消息到 localStorage
        localStorage.setItem('chatMessages', JSON.stringify(messages.value));
    });

    // 从 localStorage 加载历史消息
    const storedMessages = localStorage.getItem('chatMessages');
    if (storedMessages) {
        messages.value = JSON.parse(storedMessages);
    }
});

// 发送消息
const sendMessage = () => {
    if (question.value.trim() !== "") {
        const newMessage = {
            user: currentUser.value, // 使用当前用户身份
            content: question.value,
        };
        messages.value.push(newMessage);
        socket.value.send(JSON.stringify(newMessage)); // 发送消息到服务器
        question.value = ""; // 清空输入框
        // 存储消息到 localStorage
        localStorage.setItem('chatMessages', JSON.stringify(messages.value));
    }
};
</script>

<style>
.no-border {
    border: none;
    outline: none;
    resize: none;
}

.chat_message {
    margin: 5px 0;
}

.message-left {
    text-align: left;
}

.message-right {
    text-align: right;
}
</style>

<style lang="less" scoped>
.el_main_content {
    width: 50%;
    height: 70%;
    border-radius: 5px;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    margin: auto;

    .main_content_header {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        background-color: #7de0bd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .main_content_center {
        width: 100%;
        position: relative;
        height: calc(100% - 170px);
        margin: 10px 0px;

        .chat_message {
            padding: 10px;
            border-radius: 5px;
            margin: 5px 0;
            display: inline-block;
            max-width: 70%;
        }

        .message-left {
            background-color: #8ce45f;
            color: #ffffff;
            align-self: flex-start;
        }

        .message-right {
            background-color: #f2f3f5;
            color: #000;
            align-self: flex-end;
        }
    }

    .main_content_footer {
        width: 100%;
        height: 20px;
        border-top: 1px solid #e4e7ed;

        .input_box {
            width: 100%;
            height: 60px;

            .chat-input {
                width: calc(100% - 80px);
                padding: 10px;
                margin: auto;
            }
        }

        .btn_box {
            width: 100%;
            height: 40px;
            margin-top: -50px;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .btn {
                margin-right: 10px;
            }
        }
    }
}
</style>